<template>
  <div>
    <el-dialog
      title="重置密码"
      :visible.sync="dialogVisible"
      width="430px"
      :before-close="closeAddDialog"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <el-form
        :model="addForm"
        :rules="rules"
        ref="refAddForm"
        label-width="80px"
        autocomplete="off"
      >
        <el-form-item size="small" label="用户名">
          <el-input v-model="submitUserInfo.username" disabled></el-input>
        </el-form-item>
        <el-form-item size="small" label="新密码" prop="pwd1">
          <el-input
            autocomplete="off"
            type="password"
            show-password
            clearable
            v-model="addForm.pwd1"
            placeholder="请输入新密码"
            oninput="value=value.replace(/\s*/g,'')"
            maxlength="16"
            readOnly
            @focus="onFocus"
            @blur="onBlur"
            @input.native="onInput($event, addForm.pwd1)"
            @mousedown.native="onMousedown"
          ></el-input>
        </el-form-item>
        <el-form-item size="small" label="确认密码" prop="pwd2">
          <el-input
            autocomplete="off"
            type="password"
            show-password
            clearable
            v-model="addForm.pwd2"
            placeholder="确认密码"
            oninput="value=value.replace(/\s*/g,'')"
            maxlength="16"
            readOnly
            @focus="onFocus"
            @blur="onBlur"
            @input.native="onInput($event, addForm.pwd2)"
            @mousedown.native="onMousedown"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeAddDialog" class="cancel-button"
          >取 消</el-button
        >
        <el-button
          size="small"
          class="confirm-button"
          @click="addSubmit"
          v-preventReClick="1000"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { resetPassword } from "@/api/api";
import { validatePass } from "@utils/validate";
// import { reqResetPassword } from "../../../api/api-user";
import aes from "@/utils/asc"; //前端密码加密
export default {
  name: "resetPassword",
  props: {
    submitUserInfo: {
      type: Object,
      default: () => ({}),
    },
  },

  data() {
    var checkPass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.addForm.pwd1) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      dialogVisible: false,
      addForm: {
        pwd1: "",
        pwd2: "",
      },
      // submitUserInfo: {
      //   mobile: '',
      // },
      /*   typePwd1: "text",
        isShowPwd1: false,
        typePwd2: "text",
        isShowPwd2: false, */
      // 表单验证规则
      rules: {
        pwd1: [
          {
            required: true,
            message: "请输入新密码",
            trigger: "blur",
          },
          {
            validator: validatePass,
            trigger: "blur",
          },
        ],
        pwd2: [
          {
            required: true,
            message: "请再次输入新密码",
            trigger: "blur",
          },
          {
            validator: checkPass,
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    // 获取焦点
    onFocus(event) {
      setTimeout(function () {
        event.target.readOnly = false;
      }, 100);
    },
    // 失去焦点
    onBlur(event) {
      event.target.readOnly = true;
    },
    // 防止内容删完时出现账号和密码
    onInput(event, val) {
      if (val.length === 0) {
        this.onBlur(event);
        this.onFocus(event);
      }
    },
    // 防止多次点击时出现账号和密码
    onMousedown(event) {
      this.onBlur(event);
      this.onFocus(event);
    },
    // 点击确定修改密码
    async addSubmit() {
      this.$refs.refAddForm.validate(async (valid) => {
        if (!valid)
          return this.$modal.notifyWarning(
            "密码必须是6-16位的数字、字母或字符组成"
          );
        const res = await resetPassword({
          id: this.submitUserInfo.id,
          // pwd1: aes.encrypt(this.addForm.pwd1),
          // pwd2: aes.encrypt(this.addForm.pwd2),
          passWord: this.addForm.pwd1,
          verifyPassWord: this.addForm.pwd2,
        });
        if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
        this.$modal.notifySuccess("密码重置成功");
        this.$refs.refAddForm.resetFields();
        this.dialogVisible = false;
      });
    },
    // 点击关闭弹框
    closeAddDialog() {
      this.$refs.refAddForm.resetFields();
      this.dialogVisible = false;
    },
  },
  deactivated() {
    if (this.$refs.refAddForm != null) {
      this.closeAddDialog();
    }
  },
};
</script>

<style lang="less" scoped>
@import url("../../common.less");

//   ::v-deep .el-input.is-disabled .el-input__inner{
//   border-color: @primaryBorderColor;
//   background-color: @primaryHeaderBgcolor;
// }
</style>
